<template>
  <el-col  style="height: 100%">
    <el-menu
        style="height: 100%"
        active-text-color="#ffc64b"
        background-color="#9d2933"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#F2E6CE"
        @open="handleOpen"
        @close="handleClose"
    >
      <router-link :to="{name:'Main'}" style="text-decoration: none; color: inherit;">
        <el-menu-item index="1">
          <template #title>
            <label><el-icon><promotion/></el-icon>首页</label>
          </template>
        </el-menu-item>
      </router-link>

      <router-link :to="{name:'Attraction'}" style="text-decoration: none; color: inherit;">
      <el-menu-item index="2">
        <template #title>
              <label>
                <img src="/attractionIcon.png" alt="旅游景区" style="width: 20px;height: 20px;margin-bottom: 20px">
                旅游景区
              </label>
        </template>
      </el-menu-item>
      </router-link>

      <router-link :to="{name:'Hotel'}" style="text-decoration: none; color: inherit;">
      <el-menu-item index="3">
        <template #title>
          <span>
              <label>
              <img src="/hotelIcon.png" alt="星级酒店" style="width: 20px;height: 20px;margin-bottom: 20px">
                星级酒店
              </label>
          </span>
        </template>
      </el-menu-item>
      </router-link>

      <router-link :to="{name:'TravelAgency'}" style="text-decoration: none; color: inherit;">
      <el-menu-item index="4">
        <template #title>
            <label>
              <img src="/agencyIcon.png" alt="旅行社" style="width: 20px;height: 20px;margin-bottom: 20px">
              旅行社及旅游车辆
            </label>
        </template>
      </el-menu-item>
      </router-link>

      <router-link :to="{name:'Guide'}" style="text-decoration: none; color: inherit;">
      <el-menu-item index="5">
        <template #title>
            <label>
              <img src="/guideIcon.png" alt="导游管理" style="width: 20px;height: 20px;margin-bottom: 20px">
              导游管理
            </label>
        </template>
      </el-menu-item>
      </router-link>
    </el-menu>
  </el-col>
</template>

<script>
import {Promotion} from "@element-plus/icons-vue";

export default {
  components: {Promotion},
  methods: {
    handleOpen(key, keyPath) {
      console.log('Open:', key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log('Close:', key, keyPath);
    }
  }
}
</script>
<style scoped>
@import "../../assets/css/global.css";
</style>

